var ArticleItem = React.createClass({
    getInitialState: function(){
        
        return {
            imgUrl:this.props.item.imgUrl,
            topic:this.props.item.topic,
            mlink:this.props.item.mlink,
        }
    },
    
    fileChose: function(event){
        // debugger;
        var files = event.target.files || event.dataTransfer.files;
        this.setState({imgFile:files[0]});
    },
    // 上传图片获取img Url
    loadImg: function(){
        if(this.state.imgFile){
            this.refs.img.src = "www.ddd.com";
            // this.props.item.imgUrl = "www.ddd.com";
        }
        
    },
    /* changehandle 和clear方法都是调用父组件的方法。更新父组件的state值，子组件表单里的input值都是通过父组件的props获得。
    changehandle: function(name){
        var that = this;
        return function(event){
            that.setState({[name]: event.target.value});
        }
    }, */
    clear: function(){
        this.refs.file.value = "";
        // this.refs.img.src="";
        // this.setState({mlink:"",topic:"",imgUrl:""});
        this.props.clear(this.props.index);
    },
    
    // 获取图片url, topic, link
    getValue: function(){   
        var t_url = this.refs.img.src;
        var t_topic = this.refs.topic.value;
        var t_mLink = this.refs.mLink.value;
        if( t_url && t_topic && t_mLink){
            return {
                imageUrl: t_url,
                topic: t_topic,
                mLink: t_mLink
            }
        }else{
            return null;
        }
    },
    render:function(){
        
        return (
           
            <div className="article-item">
                <div className="item-img">
                    <img src="" ref="img" src={this.props.item.imgUrl}/>
                    <input type="file" accept="image/*" ref="file" onChange={this.fileChose}/>
                    <button onClick={this.loadImg}>上传</button>
                </div>
                <div className="item-info">
                    {/* 表单的可控组件和不可控组件，用defaultValue也没用呀 */}
                    <input type="text" placeholder="标题" ref="topic"  value={this.props.item.topic} onChange={this.props.changehandle("topic",this.props.index)}/>
                    <input type="text" placeholder="链接" ref="mLink" value={this.props.item.mlink} onChange={this.props.changehandle("mlink",this.props.index)}/>
                    <button onClick={this.clear}>清空</button>
                </div>
               
            </div>
        );
    }
});

module.exports =  ArticleItem;



